<template>
  <div class="chat-container" v-loading="loadingInfo">
    <!-- 主聊天区域 -->
    <div class="main-chat-area">
      <!-- 消息列表 -->
      <div class="message-list" ref="messageList">
        <BubbleList :list="messages" max-height="calc(100vh - 130px)">
          <template #avatar="{ item }">
            <el-avatar v-if="item.role === 'ai'" :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <template v-else-if="item.text && item.text.match(/https?:\/\/[^\s]+(\.jpg|\.png|\.gif|\.jpeg)/i)">
                <img :src="item.text.match(/https?:\/\/[^\s]+(\.jpg|\.png|\.gif|\.jpeg)/i)[0]" style="max-width: 100%; max-height: 300px; border-radius: 4px; margin-top: 8px;">
            </template>
          </template>
          <!-- 自定义头部 -->
          <template #header="{ item }">
            <div class="message-sender">
              <span>{{ item.role === 'ai' ? 'Hydro AI 助手' : '我' }}</span>
              <span class="message-time">
                {{ item.time }}
              </span>
            </div>
          </template>
          <template #content="{ item }">
            <Thinking v-if="item.text.startsWith('<think>')" 
              :content="item.text.indexOf('</think>') > -1 ? item.text.split('</think>')[0].replace('<think>', '') : item.text.replace('<think>', '')" 
              :status="item.text.indexOf('</think>') > -1  ? 'end' : 'thinking'"
            />
            <!-- 使用新的消息渲染组件 -->
            <MessageRenderer 
              v-if="item.text.indexOf('</think>') > -1" 
              :content="item.text.split('</think>')[1]"
              :is-ai="item.role === 'ai'"
            />
            <MessageRenderer 
              v-else-if="item.text.indexOf('<think>') === -1" 
              :content="item.text"
              :is-ai="item.role === 'ai'"
            />
          </template>
          <template #footer="{ item }">
            <Prompts
              title=""
              vertical
              :items="item.prompts"
              @item-click="handleItemClick"
            />
          </template>
        </BubbleList>
      </div>
      <!-- 输入框 -->
      <div class="chat-input">
        <div class="input-area">
          <!-- 推理选项控制栏 -->
          <div class="reasoning-control">
            <div class="control-item">
              <el-switch
                v-model="enableReasoning"
                :active-icon="Think"
                inactive-color="#dcdfe6"
                active-color="#409eff"
                size="small"
              />
              <span class="control-label">启用推理模式</span>
              <el-tooltip 
                content="开启后AI会显示思考过程，提供更详细的分析" 
                placement="top"
              >
                <el-icon class="info-icon"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
          
          <el-input
            v-model="inputMessage"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 7 }"
            placeholder="输入你的问题"
            class="wide-input"
            resize="none"
            @keydown.enter.ctrl="sendMessage"
            @keydown.enter.meta="sendMessage"
          />
        <div class="action-bar">
          <div class="action-info">
            <span class="shortcut-hint">Ctrl+Enter 发送</span>
            <span v-if="enableReasoning" class="reasoning-status">
              <el-icon><Think /></el-icon>
              推理模式
            </span>
          </div>
          <el-button 
            type="primary" 
            @click="sendMessage"
            :icon="ArrowRight"
            circle
            class="send-button"
          />
        </div>
        </div>
      </div>
    </div>
    
        <!-- 右侧信息面板 -->
        <div class="info-panel" v-if="showInfoPanel" :class="{ 'panel-visible': showInfoPanel }">
      <div class="panel-header">
        <h3>详细信息</h3>
        <el-button @click="closeInfoPanel" type="text" class="close-btn">×</el-button>
      </div>
      <div class="panel-content" v-if="currentMessageInfo">
        <!-- 显示消息ID和创建时间 -->
        <div class="info-section message-meta">
          <div class="meta-item">
            <span class="meta-label">消息ID:</span>
            <span class="meta-value">{{ currentMessageInfo.data.message_id }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">创建时间:</span>
            <span class="meta-value">{{ currentMessageInfo.data.created_at }}</span>
          </div>
        </div>
        
        <!-- 多条数据展示 -->
        <div class="data-items">
          <div 
            v-for="(item, index) in currentMessageInfo.data.data" 
            :key="index" 
            class="data-item"
          >
            <div class="item-header">
              <h4>数据项 {{ index + 1 }}</h4>
              <div class="item-score" v-if="item.score">
                <el-tag type="success" size="small">
                  {{ (item.score * 100).toFixed(2) }}%
                </el-tag>
              </div>
            </div>
            
            <div class="item-content">
              <!-- 文本内容 -->
              <div class="content-section">
                <h5>回答内容</h5>
                <div class="content-text">{{ item.text }}</div>
              </div>
              
              <!-- 相关链接 -->
              <div class="content-section" v-if="item.links && item.links.length > 0">
                <h5>相关链接 ({{ item.links.length }})</h5>
                <div class="links-grid">
                  <div v-for="(link, linkIndex) in item.links" :key="linkIndex" class="link-item">
                    <template v-if="isImageLink(link)">
                      <div class="image-container">
                        <img 
                          :src="link.replace(/`/g, '').trim()" 
                          alt="相关图片" 
                          class="link-image" 
                          @error="handleImageError" 
                        />
                        <div class="image-overlay">
                          <el-button 
                            size="small" 
                            type="primary" 
                            @click="openImageInNewTab(link.replace(/`/g, '').trim())"
                          >
                            查看大图
                          </el-button>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <a 
                        :href="link.replace(/`/g, '').trim()" 
                        target="_blank" 
                        class="link-url"
                      >
                        <el-button type="text" size="small">
                          {{ link.replace(/`/g, '').trim() }}
                        </el-button>
                      </a>
                    </template>
                  </div>
                </div>
              </div>
              
              <!-- 处理时间 -->
              <div class="content-section" v-if="item.processed_time">
                <h5>处理时间</h5>
                <div class="time-info">
                  <el-tag size="small" type="info">
                    {{ formatTime(item.processed_time) }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { BubbleList, Thinking, Prompts } from 'vue-element-plus-x';
import { Picture, Files, ArrowRight, QuestionFilled } from '@element-plus/icons-vue'
import API_CONFIG, { category_id } from '@/config/api.js' 
import MessageRenderer from './MessageRenderer.vue'

// 创建Think图标组件
const Think = {
  template: `
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
      <path fill="currentColor" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/>
      <path fill="currentColor" d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.4-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.8 41.3-19.8 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5 0-39.3-17.2-76-48.4-103.3z"/>
      <path fill="currentColor" d="M512 732a40 40 0 1 0 0 80 40 40 0 0 0 0-80z"/>
    </svg>
  `
}

let keyStart = 1000
//WebSocket连接相关状态
const socket = ref(null)
const isConnecting = ref(false)
const reconnectAttempts = ref(0)
const maxReconnectAttempts = 5
const reconnectDelay = 3000

// 推理模式控制
const enableReasoning = ref(false) // 默认启用推理模式

// 监听推理模式变化，清除现有推荐问题并更新URL
watch(enableReasoning, (newValue) => {
  console.log('推理模式变化:', newValue, '当前环境:', process.env.NODE_ENV)
  
  try {
    // 更新URL参数
    const currentQuery = { ...route.query }
    currentQuery.reasoning = newValue.toString()
    
    console.log('准备更新URL参数:', currentQuery)
    
    // 使用router.replace更新URL
    router.replace({ 
      path: route.path,
      query: currentQuery 
    }).then(() => {
      console.log('URL更新成功，当前URL:', window.location.href)
      console.log('当前route.query:', route.query)
    }).catch(error => {
      console.error('URL更新失败:', error)
    })
    
    if (newValue) {
      // 启用推理模式时，清除所有消息的推荐问题
      messages.value.forEach(message => {
        if (message.prompts) {
          message.prompts = []
        }
      })
    }
  } catch (error) {
    console.error('推理模式切换时发生错误:', error)
  }
})

// 信息面板相关状态
const showInfoPanel = ref(false)
const currentMessageInfo = ref(null)
const loadingInfo = ref(false)
const pendingMessageId = ref(null)

const openImageInNewTab = (imageUrl) => {
  window.open(imageUrl, '_blank')
}

// 消息列表
const messages = ref([
  {
    key: keyStart++,
    role: 'ai',
    typing: false,
    placement: 'start',
    noStyle: true,
    avatar: '',
    text: '你好，请问有什么可以帮助你的吗？',
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
    isSelf: false
  }
])
//输入框消息
const inputMessage = ref('')
const lastMessage = ref('') // 记录上一次发送的消息
//消息列表容器引用
const messageList = ref(null)
const route = useRoute()
const router = useRouter()

// 关闭信息面板
const closeInfoPanel = () => {
  showInfoPanel.value = false
  currentMessageInfo.value = null
}

// 判断是否为图片链接
const isImageLink = (link) => {
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
  const cleanLink = link.trim().toLowerCase()
  return imageExtensions.some(ext => cleanLink.includes(ext))
}

// 处理图片加载错误
const handleImageError = (event) => {
  console.error('图片加载失败:', event.target.src)
  event.target.style.display = 'none'
}

// 格式化时间
const formatTime = (timeString) => {
  try {
    const date = new Date(timeString)
    return date.toLocaleString('zh-CN')
  } catch (error) {
    return timeString
  }
}

// 连接 WebSocket
const connectWebSocket = () => {
  if (isConnecting.value || reconnectAttempts.value >= maxReconnectAttempts) 
  return isConnecting.value = true

  socket.value = new WebSocket(`${API_CONFIG.WS_URL}${API_CONFIG.ENDPOINTS.WEBSOCKET_CHAT}`)
  //WebSocket连接事件
  socket.value.onopen = () => {
    console.log('Connected to server')
    isConnecting.value = false
    reconnectAttempts.value = 0
  }
  
  socket.value.onerror = (error) => {
    console.error('WebSocket error:', error)
    isConnecting.value = false
  }
  
  socket.value.onclose = () => {
    console.log('WebSocket连接关闭')
    isConnecting.value = false
    // 尝试重新连接
    if (reconnectAttempts.value < maxReconnectAttempts) {
      reconnectAttempts.value++
      console.log(`尝试重新连接 (${reconnectAttempts.value}/${maxReconnectAttempts})...`)
      setTimeout(connectWebSocket, reconnectDelay)
    } else {
      console.log('达到最大重连次数')
      messages.value.push({
        key: keyStart++,
        role: 'ai',
        typing: false,
        placement: 'start',
        noStyle: true,
        text: '连接已断开，请刷新页面重试',
        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        isSelf: false
      })
    }
  }
  //处理接收到的消息
  socket.value.onmessage = (event) => {
    let data
    try {
      data = JSON.parse(event.data)
    } catch (error) {
      console.error('解析消息失败:', error)
      return
    }
  
    if (!data) {
      console.error('接收到无效的消息数据')
       return
    }
  
    // 处理流式响应
    if (data.type === 'chunk' || data.type === 'done' || data.type === 'error') {
    const lastMessage = messages.value[messages.value.length - 1]
    if (!lastMessage || lastMessage.isSelf) {
      // 创建新的系统消息
      const messageData = {
        key: keyStart++,
        role: 'ai',
        typing: true,
        isMarkdown: true,
        placement: 'start',
        noStyle: true,
        text: data.type === 'error' ? `错误：${data.content}` : (data.content || ''),
        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        isSelf: false
      }
      messages.value.push(messageData)
      // 仅在完成或错误时保存消息
      if (data.type === 'done' || data.type === 'error') {
        saveMessages()
        // 问答完成后，获取详细信息
        if (data.type === 'done' && pendingMessageId.value) {
          console.log('问答完成，准备获取详细信息，message_id:', pendingMessageId.value)
        }
      }
    } else {
      // 更新最后一条系统消息
      if (data.type === 'chunk') {
        lastMessage.text += data.content
      } else if (data.type === 'error') {
        lastMessage.text = `错误：${data.content}`
        saveMessages()
      } else if (data.type === 'done') {
        // 问答完成后，获取详细信息
        if (pendingMessageId.value) {
          console.log('问答完成，准备获取详细信息，message_id:', pendingMessageId.value)
        }
        saveMessages()
        // 只在非推理模式下生成推荐问题
        console.log('推理模式状态:', enableReasoning.value, '是否生成推荐问题:', !enableReasoning.value)
        if (!enableReasoning.value) {
          generateLikeMessage(lastMessage)
        }
      }
    }
    } else {
    // 处理其他类型的消息
      const messageData = {
        key: keyStart++,
        role: 'ai',
        typing: false,
        placement: 'start',
        noStyle: true,
        avatar: data.avatar || '',
        text: (data.message || data.text || '无效的消息内容').toString(),
        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        isSelf: false,
      }
    messages.value.push(messageData)
    saveMessages()
    }
  
  }
} 
  
// 发送消息函数修改
const sendMessage = async () => {
  if (!inputMessage.value.trim()) return
  
  // 关闭右侧信息面板
  if (showInfoPanel.value) {
    closeInfoPanel()
  }
  
  // 生成时间戳 TODO 后续有用
  const timestamp = Date.now()
  const timeString = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  
  const messageData = {
    key: keyStart++,
    role: 'user',
    typing: false,
    placement: 'end',
    noStyle: true,
    text: inputMessage.value,
    time: timeString,
    timestamp: timestamp, // 添加时间戳字段
    isSelf: true
  }
  
  messages.value.push(messageData)
  const currentQuery = inputMessage.value
  lastMessage.value = currentQuery
  inputMessage.value = ''
  
  // 设置待处理的消息ID
  const messageId = `msg_${timestamp}`
  pendingMessageId.value = messageId
  console.log('设置待处理消息ID:', messageId)
  
  // 发送消息到服务器获取回答，包含时间戳和推理参数
  if (socket.value && socket.value.readyState === WebSocket.OPEN) {
    socket.value.send(JSON.stringify({
      query: currentQuery,
      timestamp: timestamp, // 发送时间戳到服务器
      message_id: messageId, // 可选：添加消息ID用于追踪
      enable_reasoning: enableReasoning.value, // 新增：推理模式参数
      category_id: category_id // 新增：分类ID参数
    }))
  }
}

const handleItemClick = (item) => {
  inputMessage.value = item.label
  sendMessage()
}

const generateLikeMessage = (item) => {
  const question = lastMessage.value.trim()
  if (!question) return
  fetch(`${API_CONFIG.BASE_URL}/api/similar-questions/?question=${question}&category_id=${category_id}&top_k=5`, {
    method: 'GET',
  })
  .then(response => response.json())
  .then(data => {
    if (data.success && data.similar_questions) {
      item.prompts = data.similar_questions.map((t, i) => ({ key: i + 1, label: t.question }))
    }})
}

// 保存消息的函数（如果需要的话）
const saveMessages = () => {
  // 这里可以添加保存消息到本地存储或服务器的逻辑
  console.log('保存消息')
}

// 监听连接事件
onMounted(() => {
  console.log('Query组件挂载，当前URL:', window.location.href)
  console.log('route.query:', route.query)
  console.log('环境变量NODE_ENV:', process.env.NODE_ENV)
  
  const enable_reasoning = route.query.reasoning === 'true'
  console.log('从URL读取的reasoning参数:', route.query.reasoning, '解析结果:', enable_reasoning)
  
  enableReasoning.value = enable_reasoning
  console.log('设置enableReasoning.value为:', enableReasoning.value)
  
  connectWebSocket()
  // 确保在组件挂载后滚动到底部
  nextTick(() => {
    // 检查是否有从Home页面传递过来的消息
    const query = route.query.q
    if (query) {
      inputMessage.value = query
      // 等待WebSocket连接建立后再发送消息
      const waitForConnection = () => {
        if (socket.value && socket.value.readyState === WebSocket.OPEN) {
          sendMessage()
        } else if (reconnectAttempts.value < maxReconnectAttempts) {
          setTimeout(waitForConnection, 500)
        }
      }
      waitForConnection()
    }
  })
})

// 组件卸载时断开WS连接
onUnmounted(() => {
  if (socket.value) {
    socket.value.close()
  }
})
</script>
  
<style scoped>
/* 主容器 */
.chat-container {
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}

:deep(.content-wrapper) {
  margin: 0 0 10px 0;
  padding: 0px;
}

/* 主聊天区域 */
.main-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
    transition: margin-right 0.3s ease;
}

.main-chat-area.panel-open {
    margin-right: 400px;
}

/* 消息列表容器 */
.message-list {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 1000px;
  margin-bottom: 20px;
}

/* 自定义滚动条 */
.message-list::-webkit-scrollbar {
  width: 8px;
}
  
.message-list::-webkit-scrollbar-track {
  background: transparent;
}
  
.message-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
  
.message-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(248, 250, 255, 0.5);
}

/* 消息内容 */
.message-content {
  font-size: 14px;
  color: #333;
  padding: 12px;
  background: linear-gradient(to right, #f8f3ff 0%, #c0c3f6 100%);
  border-radius: 15px;
}
  
.message-sender {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  display: flex;
}

.message-time {
  font-size: 12px;
  padding-left: 12px;
  color: #999;
  text-align: right;
}

/*输入区域*/
.chat-input {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
}
  
  
.input-area {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
/*输入框样式*/
.wide-input :deep(.el-textarea__inner) {
  width: 100%;
  font-size: 16px;
  padding: 16px 20px;
  border: none;
  outline: none;
  color: #333;
  resize: none;
  line-height: 1.5;
  min-height: 60px;
  background: transparent;
  box-shadow: none;
}
  
/* 操作栏样式 */
.action-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px;
  background: #fff;
}
  
.send-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 50%;
}
  
.send-button.is-circle {
  border-radius: 50%;
  padding: 0;
}
  
.send-button:hover {
  background-color: #66b1ff;
}

/* 右侧信息面板样式 */
.info-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.info-panel.panel-visible {
  right: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
}

.panel-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.close-btn {
  font-size: 24px;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #409EFF;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.info-section {
  margin-bottom: 24px;
}

.info-section h4 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.info-text {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 6px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

.links-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-item {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fafafa;
}

.link-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.link-url {
  color: #409EFF;
  text-decoration: none;
  word-break: break-all;
  display: block;
  padding: 8px;
}

.link-url:hover {
  text-decoration: underline;
}

.score {
  font-size: 18px;
  font-weight: 600;
  color: #67C23A;
}

.time {
  color: #666;
  font-size: 14px;
}

.loading-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #666;
}

.loading-info span {
  margin-top: 12px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-panel {
    width: 100vw;
    right: -100vw;
  }
  
  .main-chat-area.panel-open {
    margin-right: 0;
  }
}

/* 消息元信息样式 */
.message-meta {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.meta-item:last-child {
  margin-bottom: 0;
}

.meta-label {
  font-weight: 500;
  color: #666;
}

.meta-value {
  color: #333;
  font-family: monospace;
}

/* 数据项容器 */
.data-items {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* 单个数据项样式 */
.data-item {
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.data-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.data-item:last-child {
  margin-bottom: 0;
}

/* 数据项头部 */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.item-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.item-score {
  opacity: 0.9;
}

/* 数据项内容 */
.item-content {
  padding: 16px;
}

.content-section {
  margin-bottom: 16px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.content-section h5 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content-text {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  line-height: 1.6;
  color: #333;
  border-left: 4px solid #667eea;
}

/* 链接网格布局 */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.link-item {
  position: relative;
}

/* 图片容器 */
.image-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.link-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-container:hover .link-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover .image-overlay {
  opacity: 1;
}

/* 链接URL样式 */
.link-url {
  display: block;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.link-url:hover {
  background: #e9ecef;
  border-color: #667eea;
}

/* 时间信息 */
.time-info {
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .links-grid {
    grid-template-columns: 1fr;
  }
  
  .data-item {
    margin-bottom: 12px;
  }
  
  .item-content {
    padding: 12px;
  }
}

/* 推理控制栏样式 */
.reasoning-control {
  padding: 8px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-label {
  font-size: 13px;
  color: #666;
  user-select: none;
}

.info-icon {
  color: #909399;
  cursor: help;
  font-size: 14px;
}

.info-icon:hover {
  color: #409eff;
}

/* 操作栏样式更新 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
}

.action-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shortcut-hint {
  font-size: 12px;
  color: #909399;
}

.reasoning-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.reasoning-status .el-icon {
  font-size: 12px;
}
</style>